<template>
	<div>
		<headers :title="'商品列表'"></headers>
		<van-search show-action background="#fff" @click="$router.push('/search')" input-align="center" :placeholder="$route.query.key">
			<template #action>
				<svg @click="toggle" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-border-all" viewBox="0 0 16 16">
				  <path d="M0 0h16v16H0V0zm1 1v6.5h6.5V1H1zm7.5 0v6.5H15V1H8.5zM15 8.5H8.5V15H15V8.5zM7.5 15V8.5H1V15h6.5z"/>
				</svg>
			</template>
		</van-search>
		<div class="row row-cols-2" ref="list" v-if="resolve.length">
			<goods class="col" v-for="values in resolve" :tog="tog" ref="goods" :data="values" :key="values.goods_id"></goods>
		</div>
		<div v-else class="null text-center">
			<p>
				抱歉，没有搜索到想要的商品<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
					class="bi bi-search" viewBox="0 0 16 16">
					<path
						d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
				</svg>
			</p>
		</div>
	</div>
</template>

<script>
	import headers from '@/components/header'
	import goods from '@/components/goods'
	import {
		homeIndex
	} from '@/api/home'
	export default {
		name: 'AppSearchList',
		components: {
			headers,
			goods
		},
		data: () => {
			return {
				resolve: [],
				tog:true
			}
		},
		async created() {
			const {
				data: {
					pageData: {
						items
					}
				}
			} = await homeIndex()
			this.resolve = items[6].data.filter(items => items.goods_name.includes(this.$route.query.key))
			
		},
		methods:{
			toggle(){
				this.$refs.goods.forEach(good => good.$emit('tog'));
				this.$refs.list.classList.toggle('row');
				this.$refs.list.classList.toggle('row-cols-2');
			}
		}
	}
</script>

<style scoped lang="less">
	@import url('../../style/bootstrap.css');

	.null {
		color: #828282;
		display: flex;
		justify-content: center;
		height: 50vh;
		align-items: center;

		p {
			transform: scale(1.5);
		}
	}
</style>